<template>
	<view class="footer-basic solid-top bg-white">
		<block v-for="(item, index) of menuList" :key="index">
			<view class="basic-item" @click="onMenuItem(item,index)">
				<view class="icon">
					<image class="wh-100 flex" :src="item.icon" mode="aspectFit"></image>
				</view>
				<view class="label">
					{{ value || '' }}
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	// import { toScanCode } from '@/components/scan-code/scan';
	export default {
		name: 'footerBasic',
		props:{
			value: {
				type: [String, Number],
				default: '0'
			},
		},
		data() {
			return {
				menuList: [ // 
					{
						value: 0,
						icon: '/static/footer/ftr10.png',
						label: '首页',
					},
					{
						value: 1,
						icon: '/static/footer/ftr20.png',
						label: '首页',
					},
					{
						value: 2,
						type: 'scanCode',
						icon: '/static/footer/ftr30.png',
						label: '扫码',
					},
					{
						value: 3,
						icon: '/static/footer/ftr40.png',
						label: '首页',
					},
					{
						value: 4,
						icon: '/static/footer/ftr50.png',
						label: '首页',
					}
				]
			}
		},
		methods: {
			onMenuItem(item, index) {
				switch (item.type){
					case 'scanCode': // 打开扫码
						uni.scanCode({
							scanType: 'qrCode',
							autoZoom: true,
							hideAlbum: true,
							onlyFromCamera: true, // 只允许通过相机扫码
							success:  (res) => {
								console.log('条码类型：', res.scanType);
								console.log('条码内容：', res.result);
							}
						});
						break;
					default:
						this.$emit('input', item.value || index);
						break;
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.footer-basic {
		position: relative;
		z-index: 5;
		display: flex;
		// min-height: 140rpx;
		line-height: 1;
		padding: 16rpx 0 40rpx;

		&.shadow {
			box-shadow: 0rpx 4rpx 11rpx 2rpx rgba(74, 74, 74, 0.15);
		}

		.basic-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			$iconSize: 64rpx;

			.icon {
				width: $iconSize;
				height: $iconSize;
			}

			.label {
				margin-top: 10rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #9E9E9E;
			}
		}
	}
</style>